<template>
  <div class="tour">
    <!-- carousel -->
    <div class="carousel">
      <el-carousel :interval="4000" type="card" height="450px">
        <el-carousel-item v-for="tour in swiperTours" :key="tour.id"  @click="showTourDetails(tour)">
          <div class="carousel-item">
            <img :src="tour.cover" alt="cover">
            <div class="c_title">
              <p ellipsis>{{ tour.name }}</p>
            </div> 
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- wrapper -->
    <div class="wrapper">
      <!-- slogan -->
      <div style="text-align: center">
        <div style="text-align: center; font-size: 25px; font-weight: bold; color: orange">When the heart is free, The path knows no worry</div>
        <div>
          <ul style="display: flex; margin-top: 30px; justify-content:space-around">
            <li>
              <div style="display: flex;">
                <img src="@/assets/img/lighter.png" style="width: 80px; height: 80px; margin-right:10px" alt="">
                <div style="text-align: left;font-size: 14px; margin-top: 10px; color: #455873FF; width:250px">
                  <h3 style="margin-bottom: 5px;">Fast response</h3>
                  <p>If you have any questions about your trip, you can contact us at any time</p>
                </div>
              </div>
            </li>
            <li>
              <div style="display: flex;">
                <img src="@/assets/img/clock.png" style="width: 80px; height: 80px; margin-right:10px" alt="">
                <div style="text-align: left;font-size: 14px; margin-top: 10px; color: #455873FF; width:250px">
                  <h3 style="margin-bottom: 5px;">24H Translation</h3>
                  <p>Don't worry about the language barrier, we provide you with a fulltime translation consultation service</p>
                </div>
              </div>
            </li>
            <li>
              <div style="display: flex;">
                <img src="@/assets/img/person.png" style="width: 80px; height: 80px; margin-right:10px" alt="">
                <div style="text-align: left;font-size: 14px; margin-top: 10px; color: #455873FF; width:250px">
                  <h3 style="margin-bottom: 5px;">Professional Team</h3>
                  <p>From planning to execution, we're here to make your journey unforgettable.</p>
                </div>
              </div>
            </li>
          </ul>

        </div>
      </div>
      <!-- Topic1: Spring recommendation -->
      <div class="season">
        <div class="title">
          <div class="left">Spring recommendation</div>
        </div>
        <div class="s_content">
          <div class="td_content">
            <div class="first">
              <ul>
                <li v-for="tour in firstSpringTours" :key="tour.id" @click="showTourDetails(tour)">
                  <div class="city">
                    <img :src="tour.cover" alt="">
                    <span>{{ tour.position }}</span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="second">
              <ul>
                <li v-for="tour in secondSpringTours" :key="tour.id" @click="showTourDetails(tour)">
                  <div class="city">
                    <img :src="tour.cover" alt="">
                    <span>{{ tour.position }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- Topic2: City Walk-->
      <div class="topic" style="margin-top:0">
        <div class="title">
          <div class="left">City Walk</div>
        </div>
        <div class="t_content">
          <div class="content">
            <ul>
              <li v-for="tour in cityWalkTours" :key="tour.id"  @click="showTourDetails(tour)">
                <div class="pic">
                  <img :src="tour.cover" alt="img">
                  <div class="tag">{{ tour.position }}</div>
                </div>
                <div class="txt">
                  <p class="ellipsis">{{ tour.overview }}</p>
                  <p class="price">from<span>${{ tour.price }}</span></p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- tour detail dialog -->
    <el-dialog v-model="tourDialogVisible">
      <div class="tourDialog">
        <div class="header">
          <h1>{{selectedTour.name }}</h1>
        </div>
        <img :src="selectedTour.cover">
        <p class="desc"><el-icon><Timer /></el-icon>Duration: {{selectedTour.duration }} day</p>
        <p class="desc"><el-icon><Position /></el-icon>Position: {{selectedTour.position }}</p>
        <div class="overview">
          <h2>------Overview------</h2>
          <p>{{selectedTour.overview }}</p>
        </div>
        <div class="price">
          <p>Price: <span>{{selectedTour.price }}$</span></p>
          <el-button type="warning" @click="addToOrder()">Add to Order</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import request from "@/utils/request.js";
import { ref, onMounted } from 'vue'
import { Timer, Position} from "@element-plus/icons-vue";

onMounted(() => {
  getSwiperTours(), getSpringTours(), getCityWalkTours()
});

const swiperTours = ref([])
async function getSwiperTours(){
  const res = await request.get("/tour/Swiper")
  swiperTours.value = res.data.data
}

let springTours = ref([])
let firstSpringTours = ref([])
let secondSpringTours = ref([])
async function getSpringTours(){
  const res = await request.get("/tour/Spring")
  springTours.value = res.data.data
  firstSpringTours.value = springTours.value.slice(0, 3)
  secondSpringTours.value = springTours.value.slice(3, 7)
}

const cityWalkTours = ref([])
async function getCityWalkTours(){
  const res = await request.get("/tour/CityWalk")
  cityWalkTours.value = res.data.data
}

const selectedTour = ref();
const tourDialogVisible = ref(false);
function showTourDetails(tour) {
  tourDialogVisible.value = true
  selectedTour.value = tour;
}

async function addToOrder(){
  await request.post('/order/add',{
    goodType:"Tour",
    goodId: selectedTour.value.id,
    goodName: selectedTour.value.name,
    price:selectedTour.value.price
  })
  ElMessage.success("Add tour successfully")
}
</script>
<style lang="less" scoped>
.carousel {
  margin: 30px 20px;
  .carousel-item {
    position: relative;
    img {
      border-radius: 10px;
      box-shadow: 0 0 5px gray;
      height: 400px;
      
    }
    .c_title {
      position: absolute;
      bottom: 30px;
      left: 20px;
      width: 500px;
      height: 80px;
      background-color: rgba(0,0,0,0.3);
      border-radius: 10px;
      padding: 10px;
      p {
        font-size: 20px;
        font-weight: 700;
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
        color: white;
      }      
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  height: 50px;
  margin-top: 30px;
  margin-bottom: 20px;
  border-bottom: 3px solid orange;
  padding-bottom: 10px;
}
.title .left {
  font-size: 30px;
  font-weight: bold;
  color: orange;
}

.content ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    width: 260px;
    height: 250px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 0 5px #b6b6b6;
  }
}
.content .pic {
  position: relative;
  width: 100%;
  height: 160px;
}
.content .pic img {
  border-radius: 10px 10px 0 0;
}
.content .tag {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 28px;
  line-height: 28px;
  padding: 0 5px;
  font-size: 13px;
  color: #ffffff;
  border-radius: 10px;
  background-color: rgba(113, 113, 113, 0.5);
}
.content .txt{
  width: 100%;
  height: 100px;
  padding: 5px;
  p {
    height: 45px;
  }
  .price {
    text-align: right;
    font-style: italic;
    span {
      margin-left: 5px;
      color: red;
      font-size: 20px;
      font-weight: 700;
    }
  }
}
.s_content {
  height: 480px;
  .td_content{
    .first ul {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;

      .city {
        position: relative;

        img {
          width: 355px;
          height: 200px;
          object-fit: cover;
        }

        span {
          position: absolute;
          bottom: 10px;
          left: 10px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          font-weight: bold;
          font-size: 25px;
        }
      }

    }
    .second ul {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;

      .city {
        position: relative;

        img {
          width: 260px;
          height: 200px;

          object-fit: cover;
        }

        span {
          position: absolute;
          bottom: 10px;
          left: 10px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          font-weight: bold;
          font-size: 25px;
        }
      }
    }
  }
}

.tourDialog {
  p {
    font-size: 20px;
  }

  .header {
    text-align: center;
    width: 100%;
    height: 80px;
    color: #005096;
  }
  img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    margin: 10px 0;
  }
  .desc {
    font-weight: 700;
  }
  .overview {
    text-align: center;
    margin: 10px 0;

    h2{
      color: #00bcd4;
      margin-bottom: 10px;
    }
  }
  .price {
    margin-top: 10px;
    font-style: italic;
    text-align: right;
    span {
      font-size: 30px;
      font-weight: 700;
      color: red;
    }
    .el-button {
      zoom: 1.5;
    }
  }
}

li {
  cursor: pointer;
}
</style>